<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>蔬菜</title>
		<style>
			.arrow{
				width:32px ;
				height: 32px;
				background-image: url(img/arrow.png);
				position: fixed;
				top: 90%;
				right: 20px;
				z-index: 11;
			}
			*{
				margin: 0px;
				padding: 0px;
				list-style-type: none;
				text-decoration: none;
				color: #000000;
			}
			.heard{
				width: 100%;
				height: 200px;
			}
			.heard-top{
				width: 100%;
				height: 50px;
				background-color: #000000;
			}
			.heard-top div{
				width: 1200px;
				height: 50px;
				margin: auto;
				/*border: 1px solid white;*/
			}
			.heard-top div img{
				width: 200px;
				height: 50px;
				float: left;
			}
			.heard-top div ul li a{
				width: 100px;
				height: 50px;
				float: right;
				color: #FFFFFF;
				line-height: 50px;
				text-align: center;
			}
			.heard-top div ul li:hover a{
				color: #FE9126;
				transition: all 1s;
			}
			/*顶部黑色导航栏*/
			.heard-cen{
				width: 100%;
				height: 100px;
				background-color: white;
			}
			.heard-cen div{
				width: 1200px;
				height:100px;
				/*border: 1px solid;*/
				position: relative;
				margin: auto;
			}
			.heard-cen div h1{
				margin: auto;
				width: 500px;
				height: 100px;
				font-size: 50px;
				line-height: 100px;
				color: #FE9126;
			}
			.heard-cen div input{
				width: 250px;
				height: 40px;
				font-size: 30px;
				position:absolute;
				top: 30px;
				right: 70px;
			}
			.heard-cen div span{
				width: 40px;
				height: 40px;
				float: right;
				position: absolute;
				top: 30px;
				right:20px;
				border: 1px solid;
				background-position-x: -12px;
				background-position-y: 53px;
				background-image:url(img/sousuo.png) ;
			}
			.heard-cen div span:hover{
				background-image: url(img/sss.png);
			}
			/*中间白色导航带搜索框*/
			.heard-bot{
				width: 100%;
				height: 50px;
				background-color: #FE9126;
			}
			.h-b-d{
				width: 1200px;
				height:50px;
				margin: auto;
				/*border: 1px solid;*/
				position: relative;
			}
			.index{
				width: 200px;
				height: 50px;
				float: left;
				line-height: 50px;
				text-align: center;
				/*border: 1px solid;*/
			}
			.one{
				width:200px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				float: left;
				cursor: pointer;
				/*border: 1px solid;*/
			}
			.two{
				display: none;
				width: 200px;
				height: 250px;
				background-color: white;
				z-index: 4;
				position: relative;
				box-shadow: 0px 0px 5px;
				/*border: 1px solid;*/
			}
			.two ol li a{
				width: 200px;
				height: 60px;
				line-height: 60px;
				text-align: center;
				display: block;
				color: #999999;
			}
			.two ol li:hover a{
				color: #FE9126;
				box-shadow: 0px 0px 5px;
			}
			.one:hover .two{
				display: block;
			}
			/*顶部导航*/
			.body{
				width: 1200px;
				height: 1300px;
				margin: auto;
				/*border: 1px solid;*/
				position:relative;
				top: 70px;
			}
			.body-left{
				width: 300px;
				height: 850px;
				border: 1px solid;
			}
			.body-left h1{
				width: 300px;
				height: 50px;
				line-height:50px;
				text-align: center;
				background-color: gainsboro;
			}
			.body-left ul li{
				list-style-type: circle;
				line-height: 30px;
			}
			.body-left ul li a:hover{
				color: #FE9126;
				transition: all .5s;
			}
			.bl-one{
				margin-left: 40px;
			}
			.bl-two{
				margin-left: 60px;
			}
			.body-right{
				width: 850px;
				height: 1200px;
				/*border: 1px solid;*/
				position: absolute;
				top: 0px;
				right: 0px;
			}
			.xiala{
				width:200px;
				height: 60px;
				/*border: 1px solid;*/
				float: right;
				position: relative;
			}
			.xllb{
				margin-top: 5px;
				width: 200px;
				height: 50px;
				font-size: 20px;
			}/*下拉列表结束*/
			.zhuti{
				width: 850px;
				height: 1100px;
				float: right;
				/*border: 1px solid;*/
			}
			.jrtj{
				width: 230px;
				height: 310px;
				margin: 24px;
				text-align: center;
				float: left;
				background-color: white;
				border: 1px solid #999999;
			}
			.gm{
				width: 130px;
				height: 30px;
				border: 1px solid gainsboro;
				margin: auto;
				text-align: center;
				line-height: 30PX;
				background-color:skyblue;
				border-radius:10px ;
			}
			.gm a{
				display: block;
			}
			.jrtj:hover .gm{
				background-color:#FE9126;
				transition: all .6s;
				
			}
			.jrtj img{
				width: 90%;
				height: 60%;
				margin-top: 20px;
			}
			.jrtj h4{
				line-height: 20px;
				font-size: 20px;
			}
			.jrtj span{
				line-height: 40px;
			}
			.xj{
				color:red;
				font-size: 20px;
			}
			.bottom{
				width: 100%;
				height: 300px;
				text-align: center;
				background-color: #2B2A2A;
				float: left;
			}
			.bottom img{
				width: 400px;
				height:90px;
				margin-top: 100px;
			}
			.bottom a{
				width: 100%;
				min-height: 50px;
				line-height: 50px;
				text-align: center;
				color: white;
				display: block;
			}
		</style>
	</head>
	<!--
    	作者：王风宝
    	时间：2019-11-22
    	描述：二级菜单
    -->
	<body>
		<div class="heard"><!--顶部导航-->
		<a href="#DINGBU" class="arrow"></a>
				<div class="heard-top">
					<div>
						<img src="img/logo.png" /><a name="DINGBU">
						<ul>
							<li><a href="购物车（2）.html">购物车</a></li>
							<li><a href="登录（2）.html">登录</a></li>
							<li><a href="注册（2）.html">注册</a></li>
							<li><a href="关于（2）.html">关于</a></li>
						</ul></a>
					</div>
				</div><!--顶部黑色-->
				<div class="heard-cen">
					<div>
						<h1>SUPER MARKET</h1>
						<input type="text" />
						<span></span>
					</div>
				</div>
				<div class="heard-bot">
					<div class="h-b-d">
						<ul>
							<li class="index"><a href="index.html">首页</a></li>
							<li class="one">
								<p>水果</p>
								<div class="two">
									<ol>
										<li><a href="水果(2).html">春季水果</a></li>
										<li><a href="水果(2).html">夏季水果</a></li>
										<li><a href="水果(2).html">冬季水果</a></li>
										<li><a href="水果(2).html">秋季水果</a></li>
									</ol>
								</div>
							</li>
							<li class="one">
								<p>蔬菜</p>
								<div class="two">
									<ol>
										<li><a href="蔬菜.html">青菜</a></li>
										<li><a href="蔬菜.html">干菜</a></li>
										<li><a href="蔬菜.html">肉类</a></li>
										<li><a href="蔬菜.html">海鲜</a></li>
									</ol>
								</div>
							</li>
							<li class="one">
								<p>零食</p>
								<div class="two">
									<ol>
										<li><a href="零食（2）.html">坚果</a></li>
										<li><a href="零食（2）.html">辣条</a></li>
										<li><a href="零食（2）.html">饼干</a></li>
										<li><a href="零食（2）.html">干果</a></li>
									</ol>
								</div>
							</li>
							<li class="one">
								<p>生活用品</p>
								<div class="two">
									<ol>
										<li><a href="生活用品（2）.html">餐具</a></li>
										<li><a href="生活用品（2）.html">家具</a></li>
										<li><a href="生活用品（2）.html">卫浴</a></li>
										<li><a href="生活用品（2）.html">服饰</a></li>
									</ol>
								</div>
							</li>
							<li class="one">
								<a href="每日推荐2.html">每日特价</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<!--顶部导航结束-->
			<div class="body">
				<div class="body-left"><!--左边列表-->
					<h1>类别</h1>
					<ul class="bl-one">
						<li>
							<a href="#">水果</a>
							<ul class="bl-two">
								<li><a href="水果(2).html">春季水果</a></li>
								<li><a href="水果(2).html">夏季水果</a></li>
								<li><a href="水果(2).html">秋季水果</a></li>
								<li><a href="水果(2).html">冬季水果</a></li>
								<li><a href="水果(2).html">北方水果</a></li>
								<li><a href="水果(2).html">南方水果</a></li>
								<li><a href="水果(2).html">国外水果</a></li>
							</ul>
						</li>
						<li>
							<a href="#">蔬菜</a>
							<ul class="bl-two">
								<li><a href="蔬菜.html">春季蔬菜</a></li>
								<li><a href="蔬菜.html">夏季蔬菜</a></li>
								<li><a href="蔬菜.html">秋季蔬菜</a></li>
								<li><a href="蔬菜.html">冬季蔬菜</a></li>
								<li><a href="蔬菜.html">北方蔬菜</a></li>
								<li><a href="蔬菜.html">南方蔬菜</a></li>
								<li><a href="蔬菜.html">肉类</a></li>
							</ul>
						</li>
						<li>
							<a href="#">零食</a>
							<ul class="bl-two">
								<li><a href="零食（2）.html">坚果</a></li>
								<li><a href="零食（2）.html">辣条</a></li>
								<li><a href="零食（2）.html">饼干</a></li>
								<li><a href="零食（2）.html">干果</a></li>
							</ul>
						</li>
						<li>
							<a href="#">生活用品</a>
							<ul class="bl-two">
								<li><a href="生活用品（2）.html">卫浴</a></li>
								<li><a href="生活用品（2）.html">厨房</a></li>
								<li><a href="生活用品（2）.html">服饰</a></li>
								<li><a href="生活用品（2）.html">家具</a></li>
							</ul>
						</li>
					</ul>
				</div>
				<div class="body-right"><!--右边图文混排-->
					<div class="xiala"><!--下拉列表-->
						<select class="xllb">
							<option>默认排序</option>
							<option>按受欢迎度排序</option>
							<option>按平均评级排序</option>
							<option>按销量排序</option>
							<option>按价格排序</option>
						</select>
					</div>
					<div class="zhuti"><!--中间图文混排-->
						<div class="jrtj">
							<img src="img/蔬菜/土豆.JPG" />
							<h4>土豆</h4>
							<span></span><span class="xj">￥0.5</span>
							<div class="gm">
								<a href="番茄3.html">GOUMAI</a>
							</div>
						</div>
						<div class="jrtj">
							<img src="img/蔬菜/番茄.JPG"/>
							<h4>番茄</h4>
							<span></span><span class="xj">￥0.3</span>
							<div class="gm">
								<a href="番茄3.html">GOUMAI</a>
							</div>
						</div>
						<div class="jrtj">
							<img src="img/蔬菜/白菜.JPG"/>
							<h4>白菜</h4>
							<span></span><span class="xj">￥0.2</span>
							<div class="gm">
								<a href="黄瓜3.html">GOUMAI</a>
							</div>
						</div>
						<div class="jrtj">
							<img src="img/蔬菜/紫薯.JPG" />
							<h4>紫薯</h4>
							<span></span><span class="xj">￥2.5</span>
							<div class="gm">
								<a href="紫薯3.html">GOUMAI</a>
							</div>
						</div>
						<div class="jrtj">
							<img src="img/蔬菜/胡萝卜.JPG" />
							<h4>胡萝卜</h4>
							<span></span><span class="xj">￥4.5</span>
							<div class="gm">
								<a href="番茄3.html">GOUMAI</a>
							</div>
						</div>
						<div class="jrtj">
							<img src="img/蔬菜/花菜.JPG" />
							<h4>花菜</h4>
							<span></span><span class="xj">￥0.4</span>
							<div class="gm">
								<a href="黄瓜3.html">GOUMAI</a>
							</div>
						</div>
						<div class="jrtj">
							<img src="img/蔬菜/葱.JPG" />
							<h4>葱</h4>
							<span></span><span class="xj">￥1.5</span>
							<div class="gm">
								<a href="黄瓜3.html">GOUMAI</a>
							</div>
						</div>
						<div class="jrtj">
							<img src="img/蔬菜/青椒.JPG" />
							<h4>青椒</h4>
							<span></span><span class="xj">￥3.5</span>
							<div class="gm">
								<a href="紫薯3.html">GOUMAI</a>
							</div>
						</div>
						<div class="jrtj">
							<img src="img/蔬菜/黄瓜.JPG" />
							<h4>黄瓜</h4>
							<span></span><span class="xj">￥0.5</span>
							<div class="gm">
								<a href="黄瓜3.html">GOUMAI</a>
							</div>
						</div>
						
					</div>
					<div class="youxia"><!--右下角-->
						
					</div>
				</div>
			</div>
			<div class="bottom">
				<img src="img/logo2.png" />
				<a href="#DINGBU">返回顶部</a>
			</div>
	</body>
</html>
